<template>
  <div class="app-container">
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addForm"
      label-width="100px"
      class="demo-addForm"
    >
      <el-form-item label="视频大小" prop="v_size">
        <el-input style="width: 300px" v-model="addForm.v_size.value">
          <template slot="prepend">不超过</template>
          <template slot="append">
            <el-select id="sizeFormat" v-model="addForm.v_size_unit.value">
              <el-option
                v-for="(item, index) in sizeFormat"
                :key="index"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="视频比例" prop="v_ratio">
        <el-select
          class="customSelect"
          v-model="addForm.v_ratio.value"
          placeholder="请选择活动区域"
        >
          <el-option label="16:9" value="16:9"></el-option>
          <el-option label="4:3" value="4:3"></el-option>
          <el-option label="2:1" value="2:1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :key="random" label="视频格式" prop="format0">
        <div class="select" v-for="(v, index) in loop" :key="index">
          <el-select
            class="customSelect"
            v-model="addForm['format' + index].value"
          >
            <el-option
              v-for="(item, index) in formatList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            circle
            type="primary"
            icon="el-icon-plus"
            v-show="index == loop.length - 1"
            @click="addFormatList"
          ></el-button>
          <el-button
            circle
            type="danger"
            icon="el-icon-close"
            @click="deleteAddFn(index)"
            v-if="loop.length > 1 && index == loop.length - 1"
          ></el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          v-hasPermi="['base:config:editVideo']"
          type="primary"
          @click="submitForm('addForm')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getListVideoAPi,
  getConfigtEditVideoAPi,
  getConfigRemoveVideoAPi,
} from "@/wss/api/ContentSupervision/videoSetting.js";
import LineChartVue from "../../../../../views/dashboard/LineChart.vue";
export default {
  data() {
    let validateSize = (rule, value, callback) => {
      console.log();
      if (!value.value) {
        return callback(new Error("大小不能为空"));
      } else {
        return callback();
      }
    };

    let validateRatio = (rule, value, callback) => {
      if (!value.value) {
        return callback(new Error("比例不能为空"));
      } else {
        return callback();
      }
    };
    return {
      formatList: [
        { label: "mp4", value: "mp4" },
        // { label: "后期可以加", value: "后期可以加" },
      ],
      loop: [],
      // 大小格式选择
      abc: "MB",
      random: "",
      sizeFormat: [
        {
          value: "MB",
        },

        {
          value: "KB",
        },
        {
          value: "B",
        },
      ],
      addForm: {
        // 无用的属性一定不可以加，因为下面会使用到，如过加了就会报错
        v_size: {
          name: "视频大小",
        },
        format0: {},
        v_ratio: {
          name: "视频比例",
        },
        v_size_unit: {
          name: "大小单位",
        },
      },
      rules: {
        v_size: [
          {
            validator: validateSize,
            message: "请输入视频大小",
            required: true,
            trigger: "blur",
          },
        ],
        v_ratio: [
          {
            validator: validateRatio,
            required: true,
            message: "请选择比例",
            trigger: "change",
          },
        ],
        format0: [{ required: true, message: "请选择比例", trigger: "change" }],
      },
    };
  },
  created() {
    this.getListVideoFn();
  },
  methods: {
    // 获取设定列表
    async getListVideoFn() {
      let { rows, code } = await getListVideoAPi();
      if (code == 200) {
        let i = 0;
        this.loop = [];
        console.log(rows);
        rows.forEach((item) => {
          switch (item.type) {
            case "v_size":
              this.addForm.v_size = item;
              break;
            case "v_ratio":
              this.addForm.v_ratio = item;
              break;
            case "v_size_unit":
              this.addForm.v_size_unit = item;
              break;
            case "v_format":
              // this.addForm["format0" + index] = item.value;
              this.$set(this.addForm, "format" + i, item);
              this.loop.push(item.idStr); // 统计有多少个选择框
              i++;

              break;
            default:
              break;
          }
        });
        this.random = Math.random();
      }
    },
    async deleteAddFn(index) {
      // 如果用户添加了选择但没有发送给后端，就不会有id，就不用请求去删除
      const ID = this.addForm["format" + index].idStr;
      if (!ID) {
        this.loop.splice(ID, 1);
      } else {
        await getConfigRemoveVideoAPi(ID);

        this.getListVideoFn();
      }
      // if (this.formatList.length == 1) {
      //   return this.$modal.msgSuccess("不可全部删除");
    },
    // 新增加FormatList数组
    addFormatList() {
      let length = this.loop.length;
      this.loop.push(length); //添加选择条数
      // 必须 loop.length，防止数组中原本就有format🧨
      this.$set(this.addForm, ["format" + length], {
        label: "mp4",
        value: "",
      });
      console.log(this.addForm, "listlist");
    },
    // 提交
    async submitForm(formName) {
      try {
        await this.$refs[formName].validate();
        let arr = [];
        console.log(this.addForm, "addform,form");
        // 把 this.addForm改造成后端需要的结构（数组对象）
        for (const key in this.addForm) {
          if (key.startsWith("format")) {
            arr.push({
              id: this.addForm[key].idStr,
              value: this.addForm[key].value,
              type: "v_format",
              name: "格式",
            });
          } else {
            // 修改
            if (this.addForm[key].idStr) {
              arr.push({
                id: this.addForm[key].idStr,
                value: this.addForm[key].value,
                name: this.addForm[key].name,
                type: this.addForm[key].type,
              });
              // 添加
            } else {
              arr.push({
                value: this.addForm[key].value,
                type: key,
                name: this.addForm[key].name,
              });
            }
          }
        }

        // console.log(arr, format);
        const { msg, code } = await getConfigtEditVideoAPi(arr);
        if (code == 200) {
          this.$modal.msgSuccess(msg);
          // this.getListVideoFn();
        }
      } catch (error) {
        this.$modal.msgError("请填写完成");
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.select {
  margin: 10px 0px;
}
.select:first-child {
  margin: 0px;
}

//   .el-select {
//   margin-right: 10px;
// }
::v-deep #sizeFormat {
  // margin-right: 0px;
  width: 80px;
}
::v-deep .el-button--medium.is-circle {
  margin-left: 10px;
}
::v-deep .customSelect {
  margin-left: 20px;
}
</style>